<template>
    <div class="col-lg-12 col-md-12 col-sm-12" style="margin: auto;">
        <div class="col-lg-1 col-md-1 col-sm-1"></div>
        <div class="col-lg-10 col-md-10 col-sm-10" style="">
            <div class="col-lg-5 col-md-5 col-sm-12" style="height: 300px;">
                <img :src="detail.caseimg" width="100%">
            </div>
            <div class="col-lg-7 col-md-7 col-sm-12" style="height: 300px;">
                <h2>{{ detail.detail }}</h2>
                <p>所在地：{{ detail.case_city }}</p>
                <p>装修公司： {{ detail.name }}</p>
                <p>设计师： {{ detail.nickname }}</p>
                <p>装修类型： {{ detail.style_name }}</p>
                <p>
                    <input type="button" class="designer-button" value="选择设计师"  data-toggle="modal" data-target="#designer">
                    <input type="button" class="price-button" value="选择装修公司"  data-toggle="modal" data-target="#placeorder">
                </p>
            </div>
        </div>
        <div class="col-lg-1 col-md-1 col-sm-1 seat"></div>
        <div class="col-lg-1 col-md-1 col-sm-1 seat"></div>
        <div class="col-lg-10 col-md-10 col-sm-10" style="border:solid 1px #ccc">
            <div class="col-lg-12" style="height:50px;">
                <button @click="changeColor1" :style="{background:buttoncolor1}" style="outline:none;width:120px;height:50px;border: solid 1px #ccc;">装修简介</button>
                <button @click="changeColor2" :style="{background:buttoncolor2}" style="outline:none;width:120px;height:50px;border: solid 1px #ccc;">业主评价</button>
            </div>
            <div class="col-lg-12" style="top:10px" v-for="deta in details" :style="{display:showdetail}">
                <p>&nbsp;&nbsp;{{ deta.detail_con }}</p>
                <p><img :src="deta.detail_img"></p>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 assess"
                 :style="{display:showassess}">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:200px">
                    <div class="alert alert-danger" role="alert" style="width:100%" :style="{display:ass_dis}" >
                        未登录 <a href="/login">去登陆</a>
                    </div>
                    <input type="text" v-model="ass.ass_con"
                           class="form-control bottom-20" placeholder="评价">
                    <input type="number" v-model="ass.ass_score" class="form-control bottom-20"
                           placeholder="评分（满分100）">
                    <button type="button" class="btn btn-order bottom-20"
                            style="float:right" @click="assessCase">确认</button>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 assess" v-for="ass in assess">
                    <div class="col-lg-1 col-md-2 col-sm-12 col-xs-12">
                        <img :src="ass.userhead" class="assess_head">
                    </div>
                    <div class="col-lg-8 col-md-8  col-sm-12 col-xs-12">
                        <div class="col-lg-12 col-md-12"><span class="assess_span">用户：{{ ass.nickname }}</span></div>
                        <div class="col-lg-12 col-md-12"><span class="assess_span">评价：{{ ass.assess_con }}</span></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
                        <span class="assess_span">评分：{{ ass.score }}</span>
                    </div>
                </div>
            </div>
        </div>




        <!--模态框-->

        <div class="modal fade" id="placeorder" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">下订单</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger" role="alert" style="width:100%" :style="{display:dis}">
                            {{ tips }} <a href="/login">去登陆</a>
                        </div>
                        <table class="order-table" id="to_order_table" name="to_order_table">
                            <tr>
                                <td>姓名</td>
                                <td><input type="text" v-model="apply.owner_name" class="order-input" name="owner_name"></td>
                            </tr>
                            <tr>
                                <td>手机号</td>
                                <td><input type="text" v-model="apply.owner_tel" class="order-input" name="owner_tel"></td>
                            </tr>
                            <tr>
                                <td>房屋面积</td>
                                <td><input type="text" v-model="apply.owner_floor_space" class="order-input" name="owner_floor_space"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-order" @click="placeOrder">确认</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="modal fade" id="designer" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">免费设计</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger" role="alert" style="width:100%" :style="{display:dis}" id="tips">
                            {{ tips }} <a href="/login">去登陆</a>
                        </div>
                        <table class="order-table" id="to_designer_table" name="to_designer_table">
                            <tr>
                                <td>设计师</td>
                                <td><input type="text" v-model="apply.designer" class="order-input" name="designer" readonly></td>
                            </tr>
                            <tr>
                                <td>姓名</td>
                                <td><input type="text" v-model="apply.owner_name" class="order-input" name="owner_name"></td>
                            </tr>
                            <tr>
                                <td>手机号</td>
                                <td><input type="text" v-model="apply.owner_tel" class="order-input" name="owner_tel"></td>
                            </tr>
                            <tr>
                                <td>房屋面积</td>
                                <td><input type="text" v-model="apply.owner_floor_space" class="order-input" name="owner_floor_space"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-order" @click="selectDesigner">确认</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

    </div>
</template>
<style>
    @media (max-width:700px){
        .seat{
            height: 0px;
        }
        .assess_head{
            width: 51px;
            border-radius: 50%;
            float:left
        }
    }
    @media (min-width:700px){
        .seat{
            height: 300px;
        }
        .assess_head{
            width: 51px;
            border-radius: 50%;
            float:right
        }
    }
    .assess{
        position: relative;
        padding-top: 10px;
        padding-bottom:10px;
        padding-left:0px;
        padding-right:0px;
        border:solid 1px #ccc;
        border-bottom:none !important;
    }
    .assess_span{
        color:#999;
        font-size:1.2em
    }
    .bottom-20{
        margin-bottom:20px;
    }


</style>
<script>

    /**
    *获取路径的参数
    **/
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
        return unescape(r[2]);
        return null;
    }

    export default{
        data(){
            return{
                id: '',
                detail:'',
                assess:'',
                details:'',
                buttoncolor1:'#ccc',
                buttoncolor2:'white',
                showdetail:'inline-block',
                showassess:'none',
                tips:'',
                dis:'none',
                companys: '',
                ass_dis:'none',
                apply:{
                    owner_name:'',
                    owner_tel:'',
                    owner_floor_space:'',
                    order_company:'null',
                    designer:''
                },
                ass:{
                    ass_con:'',
                    ass_score:'',
                    caseid:''
                }

            }
        },
        components:{

        },
        created(){
            var _this = this;
            this.id = getQueryString('id')
            var data = {'id': this.id}
            this.$http.post('/getcasedetail', data)
                .then(function(res){
                    _this.detail = res.body.detail.mess[0];
                    _this.assess = res.body.detail.assess;
                    _this.details = res.body.detail.detail;
                    _this.apply.designer = res.body.detail.mess[0].designerid;
                    _this.ass.caseid = res.body.detail.mess[0].caseid;
                    console.log(_this.assess);
                });
        },
        methods:{
            changeColor1 : function() {
               this.buttoncolor1 = '#ccc';
               this.buttoncolor2 = 'white';
               this.showdetail = 'inline-block';
               this.showassess = 'none';
            },
            changeColor2 : function() {
               this.buttoncolor2 = '#ccc';
               this.buttoncolor1 = 'white';
               this.showdetail = 'none';
               this.showassess = 'inline-block';
            },
            selectDesigner:function(){
                const _this = this;
                this.$http.post('users/freedesigner', this.apply)
                    .then(function(req){
                        if(req.body.mes == 'nologin'){
                            _this.tips = '请先登录！';
                            _this.dis = 'inline-block'
                        }else{
                             _this.tips = '申请成功，请耐心等待！';
                            _this.dis = 'inline-block';
                            $('#designer').hide(4000);
                        }
                    });
            },
            placeOrder: function(){
                const _this = this;
                this.$http.post('users/placeorder', this.apply)
                    .then(function(req){
                        if(req.body.mes == 'nologin'){
                            _this.tips = '请先登录！';
                            _this.dis = 'inline-block'
                        }else{
                             _this.tips = '下单成功，请等待该公司联系你！';
                            _this.dis = 'inline-block'
                            $('#placeorder').hide(4000);
                        }
                    });
            },
            assessCase: function(){
                const _this = this;
                this.$http.post('users/assesscase', this.ass)
                    .then(function(res){
                        if(res.body.mes){
                            var asse = res.body.mes;
                            asse.assess_con = _this.ass.ass_con;
                            asse.caseid = _this.ass.caseid;
                            asse.score = _this.ass.ass_score;
                            _this.assess.push(asse);
                            _this.ass.ass_con = '';
                            _this.ass.ass_score = '';

                        }else{
                            _this.ass_dis = 'inline-block'
                        }
                    });
            }
        }
    }
</script>
